/// 根据背景色确定图标颜色;
/// @param {string} $color - 背景颜色;
@function icon-color($color) {
  @if (lightness($color) > 50) {
    @return darken($color, 30%);
  } @else {
    @return lighten($color, 30%);
  }
}

/// 波纹；应用于按钮hover效果;
/// @param {string} $color - 波纹背景颜色;
/// @param {number|string} $growthField - 波纹扩散范围;
/// @param {number|string} $size - 按钮大小;
/// @param {string} $iconClassName - 图标类名;
@mixin ripples($color, $growthField, $size, $iconClassName: "material-icons") {
  @if unitless($growthField) {
    $growthField: $growthField * 1px;
  }
  background: $color;
  border-radius: 50%;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  @if unitless($size) {
    $size: $size * 1px;
  }
  width: $size;
  height: $size;
  &:hover::before {
    content: "";
    position: absolute;
    width: $size;
    height: $size;
    border-radius: 50%;
    animation: ripples 0.8s ease-in-out;
  }
  #{"." + $iconClassName} {
    color: icon-color($color);
  }
}

@keyframes ripples {
  from {
    border: 1px solid transparent;
  }
  to {
    border: $growthField solid darken($color, 12%);
    opacity: 0;
  }
}
